<template>
  <div class="categoriesBox">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 主体部分卡片 -->
    <el-card class="box-card">
      <!-- 添加分类按钮 -->
      <el-button
        type="primary"
        style="margin-left: 0px; margin-bottom: 15px"
        @click="dialogFormVisible = true"
        >添加分类</el-button
      >
      <!-- 主体表格部分 -->
      <el-table border class="mt-15" :data="categoriesData" style="width: 100%">
        <el-table-column label="#" type="index" width="48px" align="center">
        </el-table-column>
        <el-table-column
          label="分类名称"
          prop="cat_name"
          align="center"
        >
          <template>
            
          </template>
        </el-table-column>
        <el-table-column
          label="是否有效"
          prop="cat_deleted"
          align="center"
        >
          <template slot-scope="scope">
            <i class="el-icon-success" v-if="scope.row.cat_deleted == true" style="color:#00ff00"></i>
            <i class="el-icon-error" v-else></i>
          </template>
        </el-table-column>
        <el-table-column
          label="排序"
          prop="cat_level"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag effect="dark" v-if="scope.row.cat_level == 0" size="mini">一级</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              dark
              icon="el-icon-edit"
              @click="editCategories(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              dark
              icon="el-icon-delete"
              @click="deleteCategories(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum * 1"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalpage"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getCategories } from '../../api'
export default {
  data() {
    return {
      categoriesData: [],
      totalpage: 0,
      params: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
    }
  },
  methods: {
    // 获取分类列表
    async getCategoriesList() {
      let { data: { total, pagenum, result }, meta: { msg, status } } = await getCategories(this.params);
      // console.log(data);
      if(status != 200) return this.$message.error(msg)
      this.categoriesData = result;
      this.params.pagenum = pagenum*1;
      this.totalpage = total;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      // 每页显示数据的改变即为向后台发送数据请求,得到相应的页数和数据量然后渲染
      this.params.pagesize = val;
      this.getCategoriesList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.pagenum = val;
      this.getCategoriesList();
    },
  },
  created() {
    this.getCategoriesList()
  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
  max-height: 800px;
  overflow: auto;
  text-align: left;
}

.categoriesBox {
  padding-left: 20px;
}

.el-breadcrumb {
  font-size: 12px;
  background-color: initial;
  margin-bottom: 0;
}

</style>